fix: Resolve keyboard overlap for Apply button in Withdrawal ID filter - #106814

Summary

This PR addresses an issue on Android where the "Apply" button in the "Withdrawal ID" exposed filter is overlapped by the keyboard, making it inaccessible to the user. The fix ensures that the "Apply" button remains visible and interactive even when the keyboard is active.

Changes

• src/pages/iou/steps/IOUAmountPage/WithdrawalAccountForm.tsx:
  • Wrapped the form content in a ScrollView component.
  • Added a useEffect hook to listen for keyboardDidShow events.
  • When the keyboard appears, the ScrollView is programmatically scrolled to the bottom using scrollViewRef.current?.scrollToEnd({animated: true}). This ensures that the "Apply" button, which is positioned at the bottom of the form, is always visible.

Verification

1. Open the Expensify app on an Android device.
2. Navigate to "Spend" > "Expenses".
3. Tap on the "Filters" icon.
4. Select "Withdrawal ID" and tap "Confirm".
5. Tap on the "Apply Filters" button.
6. Tap on the text input field for "Withdrawal ID" to bring up the keyboard.
7. Observe that the "Apply" button is now fully visible and accessible, not overlapped by the keyboard.
8. Attempt to scroll the content manually to confirm it behaves as expected.

$ #105145

Algora Bounty Claim / Payout Address:
BEP-20 (BNB Smart Chain / USDT): 0xF3eB3302483845763b54C080a4eF24df7dc368Ef